<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
	<script>
	  // 初始化
	  var vConsole = new VConsole();
	  console.log('Hello world');
	</script>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        .title {
            position: fixed;
            z-index: 999999999;
            width: 100vw;
            text-align: center;
            left: 0px;
            top: 0px;
            font-size: 25px;
            font-weight: 900;
            color: white;
            padding: 30px 0px;
            letter-spacing: 10px;
        }
        
         :root {
            --line: green;
        }
        
        .mask {
            position: fixed;
            z-index: 99999999;
            width: 60vw;
            height: 60vw;
            left: 50%;
            top: 50%;
            margin-left: -30vw;
            margin-top: -30vw;
            border: 3px solid var(--line);
            box-shadow: 0 0 500px 510px rgba(0, 0, 0, 0.7);
        }
        
        .leftTop {
            position: absolute;
            left: -12px;
            top: -12px;
            border-top: 6px solid var(--line);
            border-left: 6px solid var(--line);
            width: 20px;
            height: 20px;
        }
        
        .leftBottom {
            position: absolute;
            left: -12px;
            bottom: -12px;
            border-bottom: 6px solid var(--line);
            border-left: 6px solid var(--line);
            width: 20px;
            height: 20px;
        }
        
        .rightTop {
            position: absolute;
            right: -12px;
            top: -12px;
            border-top: 6px solid var(--line);
            border-right: 6px solid var(--line);
            width: 20px;
            height: 20px;
        }
        
        .rightBottom {
            position: absolute;
            right: -12px;
            bottom: -12px;
            border-bottom: 6px solid var(--line);
            border-right: 6px solid var(--line);
            width: 20px;
            height: 20px;
        }
        
        .mask::after {
            position: absolute;
            width: 60vw;
            height: 5px;
            background-image: linear-gradient(to right, transparent, rgba(18, 189, 61, 0.9), transparent);
            left: 50%;
            margin-left: -30vw;
            top: 0px;
            content: '';
            z-index: 11;
            animation-duration: 1.5s;
            animation-delay: 1s;
            animation-iteration-count: infinite;
            animation: slideOutRight 1.5s linear infinite;
        }
        
        @keyframes slideOutRight {
            0% {
                -webkit-transform: translateY(5vw) rotateZ(0deg);
                transform: translateY(5vw) rotateZ(0deg)
            }
            100% {
                -webkit-transform: translateY(55vw) rotateZ(0deg);
                transform: translateY(55vw) rotateZ(0deg)
            }
        }
    </style>
</head>

<body>
    <div class="title">扫一扫</div>
    <div class="mask">
        <div class="leftTop"></div>
        <div class="leftBottom"></div>
        <div class="rightTop"></div>
        <div class="rightBottom"></div>
    </div>
    <video id="test" autoplay playsinline></video>
    <div id="cutImage"></div>
    <canvas id="qrcanvas" style="display:none;"></canvas>
    <!-- 引入二维码解析代码 -->
    <script src="https://yx2.gzyuexin168.com/testweb/static/qrindex.js"></script>
    <script>
        init("environment")
            // 初始化
        function init(exact) {
            navigator.mediaDevices.getUserMedia({
                video: {
                    facingMode: {
                        exact: exact //  user：前置摄像头   environment：后置摄像头
                    },
                    width: {
                        ideal: window.innerHeight
                    },
                    height: {
                        ideal: window.innerWidth
                    }

                }
            }).then(stream => {
                document.getElementById("test").srcObject = stream;
            }).catch(error => {
                init("user")
                console.log(error);
            });
            var player = document.getElementById('test');
            player.style.width = window.innerWidth + "px"
            player.style.height = window.innerHeight + "px"
        }

        // 每隔一秒钟截取一下图片
        setInterval(screenShot, 1000)

        // 截屏
        function screenShot() {
            var id = "test"
            var player = document.getElementById(id); //获取video的Dom节点
            player.setAttribute("crossOrigin", "anonymous"); //添加srossOrigin属性，解决跨域问题
            var canvas = document.createElement("canvas");
            var img = document.createElement("img");
            canvas.width = player.clientWidth;
            canvas.height = player.clientHeight;
            canvas.getContext("2d").drawImage(player, 0, 0, canvas.width, canvas.height); //截
            var dataURL = canvas.toDataURL("image/png"); //将图片转成base64格式
            base64ToqR(dataURL)

        }

        // 解析图片中的二维码
        function base64ToqR(data) {
            var c = document.getElementById("qrcanvas");
            var ctx = c.getContext("2d");
            var img = new Image();
            img.src = data;
            img.onload = function() {
                c.style.width = img.width + "px"
                c.style.height = img.height + "px"
                c.setAttribute("width", img.width);
                c.setAttribute("height", img.height);
                ctx.drawImage(img, 0, 0, img.width, img.height);
                var imageData = ctx.getImageData(0, 0, img.width, img.height);
                const code = jsQR(imageData.data, imageData.width, imageData.height, {
                    inversionAttempts: "dontInvert",
                });
                if (code) {
                    // 二维码中的内容
                    alert(code.data)
                } else {
                    console.log("未识别")
                }
            };
        }
    </script>
</body>

</html>